<template>
    <div class="payment-pie">
        <div class="block-title">
            <span>支出项目占比</span>
            <div class="title-right">
                <el-date-picker
                    size="mini"
                    v-model="dates"
                    @change="handleDateChange"
                    type="daterange"
                    :editable="false"
                    value-format="yyyy-MM-dd" 
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                </el-date-picker>
            </div>
        </div>
        <div class="payment-pie-chart">
            <div id="paymentPie" style="width:100%;height:100%"></div>
        </div>
    </div>
</template>
<script>
import echarts from '@/lib/echarts.js';
import { debounce } from '@/lib/utils';
export default {
    data(){
        return{
            dates:[],
            incomeData:[
                {
                    name:'衣',
                    value:'1000'
                },
                {
                    name:'食',
                    value:'7000'
                },
                {
                    name:'住',
                    value:'2000'
                },
                {
                    name:'行',
                    value:'13000'
                },
                {
                    name:'基金',
                    value:'8000'
                },
                {
                    name:'股票',
                    value:'5000'
                },
                {
                    name:'比特币',
                    value:'2000'
                },
                {
                    name:'抖音',
                    value:'2000'
                },
                {
                    name:'其他',
                    value:'2000'
                }
            ]
        }
    },
    mounted() {
        this.init()
    },
    methods: {
        init(){
            this.getData();
        },
        getData(){
            let legendData = this.incomeData.map((item)=>{
                return item.name
            })
            this.chartFn(legendData,legendData,this.incomeData);
        },
        chartFn(legendData,selectedData,incomeData){
            var _this = this;
            if (_this.chart) {
                _this.chart.dispose();
                _this.chart = null;
            }
            var dom = document.getElementById("paymentPie");
            console.log('dom',dom)
            if(!dom || dom == null){
                return;
            }
            _this.chart = echarts.init(dom);
            var app = {};
            var option = null;
            option = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                legend: {
                    type: 'scroll',
                    bottom: 20,
                    data: legendData,
                    selected: selectedData
                },
                series: [
                    {
                        name: '收入',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '50%'],
                        data: incomeData,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            if (option && typeof option === "object") {
                _this.chart.setOption(option, true);
            }
            var resizeHanlder = debounce(() => {
                if(_this.chart){
                    _this.chart.resize();
                }
            }, 100);
            window.addEventListener('resize', resizeHanlder);
        },
        handleDateChange(){
            this.getData()
        }
    },
}
</script>
<style lang="less" scoped>
.payment-pie{
    width:100%;
    height: 25vw;
    min-height: 250px;
    &-chart{
        width:100%;
        height: calc(100% - 50px);
    }
}
</style>